<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .header{
    height: 60px;
    background-color: pink;
  }
  .banner{
    width: 1200px;
    height: 300px;
    margin: 20px auto;
  }
  a {
    text-decoration: none;
    font-size: 14px;
  }
  .banner >a{
    width: 285px;
    height: 300px;
    float: left;
    margin-right: 20px;
    background-color: rosybrown;
  }
  .banner>a:last-child{
    margin-right: 0px;
  }

  .content{
    width: 1200px;
    height: 900px;
    margin: 10px auto;
  }
  .content>a{
    width: 393.3px;
    height:300px ;
    background-color: goldenrod;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .content>a:nth-child(3n){
    margin-right: 0px;
  }

  .footer{
    margin-top: 30px;
    height: 120px;
    background-color: mediumpurple;
  }
</style>
<body>

<div class="header">

</div>
<div class="banner">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#" class="last-a">4</a>
</div>
<div class="content">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">4</a>
</div>
<div class="footer">

</div>
</body>
</html>